<template>
	<view class="pageItem" :class="edit?'has_footer':''">
		<view class="head">
			<view class="back iconfont" @click="backTo()">&#xe8b7;</view>
			<view class="h_con">{{$t('pages.favorite')}}</view>
			<view class="h_btn" v-if="edit" @click="editChange">{{$t('use.cancel')}}</view>
			<view class="h_btn" v-else @click="editChange">{{$t('use.edit')}}</view>
		</view>
		<view class="main">
			<view class="movie_item">
				<view class="m_con">
					<block v-for="(item,index) in list" :key="item.id">
						<view class="movie" @click="selectChange" :data-index="index" :data-id="item.id">
							<block v-if="edit">
								<view class="iconfont select select_s" v-if="item.select">&#xe730;</view>
								<view class="iconfont select" v-else>&#xe730;</view>
							</block>
							<image class="img" :src="realUrl(item.logo)"></image>
							<view class="txt">{{show_pt(item)}}</view>
						</view>
					</block>
					
					<block v-if="empty_show">
						<view style="width:100%;margin-top: 20vw;" v-if="list.length==0">
							<u-empty mode="data" iconSize="120"  :text="$t('nodata')" ></u-empty>
						</view>
					</block>
					
					<view class="list_tip">
						<!-- <label class="txt">{{$t('use.list_tip')}}</label> -->
					</view>
				</view>
			</view>
		</view>
		<view class="footer" v-if="edit">
			<view class="btn" @click="selectAll">{{$t('use.all_check')}}</view>
			<view class="btn del" @click="del_like()">{{$t('use.delete')}}</view>
		</view>
	</view>
</template>

<script>
	import lang_mix from '@/lib/mixin/lang_mixin.js';
	export default {
		mixins:[lang_mix],
		data() {
			return {
				edit:false,
				load_type : 'more', 
				loading : 0,
				empty_show : 0, 
				page : 1,
				list:[
					
				],
				del_list : [],
				allSelect:false,
			};
		},
		onLoad() {
            this.loadData();
		},
		methods:{
			page_init(){
				this.page = 1;
				this.loadtype = 'more';
				this.list = [];
				this.loadData();
			},
			del_like(){
				if(this.del_list.length == 0){
					this.showMsg(this.$t('system.tip10'));
					return false;
				}
				uni.$u.throttle(this.real_del_like, 800)
			},
			real_del_like(){
				let url = this.site_url + 'api/auth/member/my_like_del';
				let params = {
					ids : this.del_list
				};
				this.areq(url,params,'POST').then(res=>{
					if(res.code == 1){
						this.showMsg(this.$t('system.tip11'));
						this.edit = false;
						
					    this.del_list.forEach(id=>{
						   let index = this.list.findIndex(val => val.id === id);
						   this.list.splice(index,1);
					   })
						
					}else{
						this.showMsg(res.msg)
					}	
				})	
			},
			loadData(){
				if (this.load_type === 'loading' || this.load_type === 'no_more') {
					//防止重复加载
					return;
				}
				this.load_type = 'loading';
				let url = this.site_url + 'api/auth/member/my_flow_list?page='+this.page;
					this.areq(url).then(res=>{
						this.empty_show = 1;
						this.loading = 1;
						   if(res.code == 1){
							   this.page++;
							   this.list = [...this.list,...res.data];
							   if(res.data.length == 20)
							   {
							   	this.load_type = 'more';
							   }else{
							   	this.load_type = 'no_more';
							   }
						   }else{
							   this.load_type = 'no_more';
						   }
					})	
			},
			selectAll(){
				this.allSelect = !this.allSelect;
				let _list = JSON.parse(JSON.stringify(this.list));
				this.del_list = [];
				this.list = _list.map(item=>{
					item.select = this.allSelect;
					this.del_list.push(item.id);
					return item;
				})
				this.list = _list;
			},
			selectChange(e){
				if(this.edit){
					let _list = JSON.parse(JSON.stringify(this.list));
					let i = e.currentTarget.dataset.index;
					let flag =  !_list[i].select;
					if(flag){
						this.del_list.push(_list[i].id);
					}else{
						let idx = this.del_list.indexOf(_list[i].id);
						if(idx > -1){
							this.del_list.splice(idx,1);
						}
					}
					_list[i].select = flag;
					if(!_list[i].select){ this.allSelect = false };
					this.list = _list;
				}else{
					let id = e.currentTarget.dataset.id;
					// #ifdef APP
					this.$r('/pages/popular/shortDetail?id='+id);
					// #endif
					// #ifdef H5
					this.$r('/pages/popular/shortDetail_h5?id='+id);
					// #endif
				}
			},
			editChange(){
				this.edit = !this.edit;
				let _list = JSON.parse(JSON.stringify(this.list));
				this.list = _list.map(item=>{
					item.select = false;
					return item;
				})
				this.del_list = [];
				this.allSelect = false;
			}
		}
		
	}
</script>

<style lang="scss">
.has_footer{
	padding-bottom: 19vw;
}
.head{
	width: 100%;
	position: fixed;
	z-index: 98;
	top: 0;
	left: 0;
	padding: calc(var(--status-bar-height) + 1vw) 4% 0;
	display: flex;
	align-items: center;
	background: $main_bg_color;
	color: white;
	.back{
		width: 6vw;
		text-align: left;
		font-size: 4vw;
	}
	.h_con{
		flex: 1;
		padding-right: 6vw;
		height: 44px;
		line-height: 44px;
		font-size: 4vw;
		font-weight: bold;
		text-align: center;
		position: relative;
	}
	.h_btn{
		position: absolute;
		right: 4vw;
		bottom: 5px;
		font-size: 3.5vw;
		padding: 0 4vw;
		line-height: 28px;
		background: $main_color2_s;
		color: $main_color5;
		border-radius: 15px;
	}
}
.main{
	width: 100%;
	position: relative;
	z-index: 2;
	padding: calc(var(--status-bar-height) + 1vw + 44px) 4% 0;
	.movie_item{
		.m_con{
			width: 100%;
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			.movie:not(:nth-child(3n+1)){
				margin-left: 2%;
			}
			.movie{
				width: 32%;
				margin-top: 3.2vw;
				position: relative;
				.select{
					position: absolute;
					font-size: 5vw;
					color: rgba(255, 255, 255, 0.7);
					top: 2vw;
					right: 2vw;
					z-index: 2;
				}
				.select_s{
					color: $main_color_s2;
					background: #fff;
					border-radius: 50%;
				}
				.img{
					width: 100%;
					height: 35vw;
					border-radius: 2vw;
					position: relative;
					z-index: 1;
				}
				.txt{
					width: 100%;
					padding-top: 0.5vw;
					font-size: 3.7vw;
					font-weight: bold;
					color: $main_color5;
					@include text_over_style(1);
					position: relative;
					z-index: 1;
				}
			}
		}
	}
}
.footer{
	width: 100%;
	position: fixed;
	bottom: 0;
	left: 0;
	height: 16vw;
	padding: 3vw 4% 6vw;
	display: flex;
	align-items: center;
	z-index: 98;
	background: #fff;
	border-top: 1rpx solid #f3f3f3;
	.btn:not(:first-child){
		position: relative;
		&::before{
			content: '';
			position: absolute;
			left: 0;
			top: 2vw;
			width: 1rpx;
			height: 5vw;
			background: #f3f3f3;
		}
	}
	.btn{
		flex: 1;
		line-height: 9vw;
		font-size: 4.3vw;
		font-weight: bold;
		text-align: center;
	}
	.del{
		color: #E6320A;
	}
}
</style>
